<template>
    <div class="login-wrap">
        <el-form class="login-container" :rules="rules" ref="user" :model="user">
            <h1 class="title">管理员登录</h1>
            <el-form-item prop="username">
                <el-input type="text" placeholder="用户账号" prefix-icon="el-icon-user"
                          v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" placeholder="用户密码" prefix-icon="el-icon-lock"
                          show-password v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doLogin" style="width: 100%;">登录</el-button>
            </el-form-item>
            <el-row style="text-align: center;margin-top: -10px;">
                <el-link type="primary" @click="$router.push('/register')" style="margin-right: 6px">注册</el-link>
                <!--                <el-link type="primary" >忘记密码</el-link>-->
            </el-row>
        </el-form>
    </div>

</template>

<script>


export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Login',
    data() {
        return {
            user: {
                username: '',
                password: '',
            },
            rules: {//表单规则
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 1, max: 30, message: '长度在 5 到 20 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
                ],
            }
        }
    },
    methods: {
        doLogin() {
            //发送请求
            this.axios.post("/back_system_admin/login", this.user).then((res) => {
                //打印收到的数据（用于测试）
                // console.log(res.data)
                //验证
                if (res.data.code === 200) {
                    // localStorage.setItem("token", res.data.token)
                    localStorage.setItem("user", JSON.stringify(res.data.data))  // 存储用户信息到浏览器
                    this.$message.success("登陆成功")
                    this.$router.push('/')
                }else {
                    this.$message.error(res.data.msg)
                }
            }).catch(() => {//异常
                this.$message.error("服务器异常")
            });
        },
    }
}
</script>

<style>
.login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
}

.login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
</style>
